<template>
    <div>
        <headers v-if="$slots.header">
            <slot name="header" :msg :title="tle"></slot>
        </headers>
        <main>
            <slot :msg>main</slot>
        </main>
        <footer>
            <slot name="footer">footer</slot>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const msg=ref('子组件的msg')
const tle=ref('子组件的标题')
</script>
